// 传统写法
// const APP = {
//     template: "#my-app",
//     data() {
//         return {
//             message: "Hello World!"
//         }
//     },
// }
// Vue.createApp(APP).mount('#app')

Vue.createApp({
    template: '#my-app',
    data() {
        return {
            books: [
                {
                    id: 1,
                    name: '《算法导论》',
                    date: '2006-2',
                    price: 85.00,
                    count: 1
                },
                {
                    id: 2,
                    name: '《学习Javascript数据结构与算法》',
                    date: '2019-6',
                    price: 46.00,
                    count: 1
                },
                {
                    id: 3,
                    name: '《编程珠玑》',
                    date: '2008-10',
                    price: 39.00,
                    count: 1
                },
                {
                    id: 4,
                    name: '《编程艺术》',
                    date: '2006-9',
                    price: 59.00,
                    count: 1
                },
                {
                    id: 5,
                    name: '《深入浅出Node》',
                    date: '2016-7',
                    price: 45.00,
                    count: 1
                }
            ]
        }
    },
    computed: {
        totalPrices() {
            let finalPrice = 0;
            for (let book of this.books) {
                finalPrice += book.price * book.count;
            }
            return finalPrice
        }  
    },
    methods: {
        decrement(index) {
            this.books[index].count--
        },
        increment(index) {
            this.books[index].count++
        },
        removeBook(index) {
            this.books.splice(index, 1);
        }
    },
    
}).mount('#app')

